<template>
    <div class="qilin-QilinDialog">
        <div class="header">基本使用</div>
        <el-button type="primary" @click="dialogConfig.isShow=true">打开弹窗</el-button>
        <QilinDialog v-model:dialogConfig="dialogConfig" @handleClose="dialogConfig.isShow=false"
            @submitConfirm="console.log('点击确定按钮')"
        >
            <template v-slot:extra>
                <div>额外的内容，extra插槽~</div>
            </template>
            <div>弹窗内内容，默认插槽~</div>
        </QilinDialog>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <QilinTable v-model:tableConfig="eventsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Exposes</div>
        <br>
        <br>
        <div class="header">Slots</div>
        <QilinTable v-model:tableConfig="slotsTableConfig"></QilinTable>
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <el-button type="primary" @click="dialogConfig.isShow=true">打开弹窗</el-button>
        <QilinDialog v-model:dialogConfig="dialogConfig" @handleClose="dialogConfig.isShow=false"
            @submitConfirm="console.log('点击确定按钮')"
        >
            <template v-slot:extra>
                <div>额外的内容，extra插槽~</div>
            </template>
            <div>弹窗内内容，默认插槽~</div>
        </QilinDialog>
        // --js部分
        const dialogConfig=reactive({
            isShow:false,
            title:"Qilin弹窗",
            width:700
        });
    `
});


/*
    逻辑脚本代码区域
*/
const dialogConfig=reactive({
    isShow:false,
    title:"Qilin弹窗",
    width:700
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 12 && columnIndex === 0) ||
            //     (rowIndex === 17 && columnIndex === 0) ||
            //     (rowIndex === 22 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"isShow",
            attrType:"boolean",
            description:"是否显示弹窗",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"title",
            attrType:"string",
            description:"弹窗标题",
            valuable:"-",
            default:"提示"
        },
        {
            attrName:"top",
            attrType:"string",
            description:"弹窗的margin-top值",
            valuable:"-",
            default:"15vh"
        },
        {
            attrName:"closeOnClickModal",
            attrType:"boolean",
            description:"是否可以通过点击阴影部分即modal部分关闭弹窗",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"closeOnPressEscape",
            attrType:"boolean",
            description:"是否可以通过按下ESC关闭弹窗",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"modal",
            attrType:"boolean",
            description:"是否需要遮罩层即modal层",
            valuable:"true/false",
            default:"true"
        },
        {
            attrName:"appendToBody",
            attrType:"boolean",
            description:"弹窗元素自身是否插入至body元素上去",
            valuable:"true/false",
            default:"true"
        },
        {
            attrName:"width",
            attrType:"number/string",
            description:"弹窗元素的宽度",
            valuable:"-",
            default:600
        },
        {
            attrName:"center",
            attrType:"boolean",
            description:"弹窗头部和底部是否居中排列",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"fullscreen",
            attrType:"boolean",
            description:"是否为全屏弹窗",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"className",
            attrType:"string",
            description:"弹窗元素el-dialog的自定义类名",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"isHideFooter",
            attrType:"boolean",
            description:"是否隐藏弹窗脚部元素部分",
            valuable:"true/false",
            default:"false"
        },
        {
            attrName:"confirmBtnConfig",
            attrType:"object",
            description:"弹窗确认按钮的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"btnName",
                    attrType:"string",
                    description:"确认按钮的文字名称",
                    valuable:"-",
                    default:"确定",
                },
                {
                    attrName:"btnType",
                    attrType:"string",
                    description:"确认按钮的类型",
                    valuable:"'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
                    default:"primary",
                },
                {
                    attrName:"btnSize",
                    attrType:"string",
                    description:"确认按钮的尺寸",
                    valuable:"'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"isShow",
                    attrType:"boolean",
                    description:"是否显示确认按钮",
                    valuable:"true/false",
                    default:"true",
                },
            ]
        },
        {
            attrName:"cancelBtnConfig",
            attrType:"object",
            description:"弹窗取消按钮的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"btnName",
                    attrType:"string",
                    description:"取消按钮的文字名称",
                    valuable:"-",
                    default:"取消",
                },
                {
                    attrName:"btnType",
                    attrType:"string",
                    description:"取消按钮的类型",
                    valuable:"'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
                    default:"default",
                },
                {
                    attrName:"btnSize",
                    attrType:"string",
                    description:"取消按钮的尺寸",
                    valuable:"'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"isShow",
                    attrType:"boolean",
                    description:"是否显示取消按钮",
                    valuable:"true/false",
                    default:"true",
                },
            ]
        },
        {
            attrName:"additionalButton",
            attrType:"object",
            description:"弹窗取消额外按钮的配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"btnName",
                    attrType:"string",
                    description:"额外按钮的文字名称，旧版本btnText",
                    valuable:"-",
                    default:"额外按钮",
                },
                {
                    attrName:"btnType",
                    attrType:"string",
                    description:"额外按钮的类型",
                    valuable:"'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
                    default:"default",
                },
                {
                    attrName:"btnSize",
                    attrType:"string",
                    description:"额外按钮的尺寸",
                    valuable:"'large' | 'default' | 'small'",
                    default:"default",
                },
                {
                    attrName:"btnClick",
                    attrType:"function",
                    description:"额外按钮的点击事件，旧版本click",
                    valuable:"()=>{}",
                    default:"-",
                },
            ]
        },
    ],
    paginationsObj:{
        isHide:true
    }
});
const eventsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"事件名",
            prop:"eventName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"eventType",
            type:"text",
            width:120
        },
        {
            label:"参数",
            prop:"eventValue",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            eventName:"handleClose",
            eventType:"function",
            eventValue:"-",
            description:"关闭弹窗触发事件"
        },
        {
            eventName:"submitConfirm",
            eventType:"function",
            eventValue:"-",
            description:"点击确定按钮触发事件"
        },
    ],
    paginationsObj:{
        isHide:true
    }
});
const slotsTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"插槽名",
            prop:"slotName",
            type:"text",
            width:120
        },
        {
            label:"数据值",
            prop:"slotData",
            type:"text",
            width:180
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        }
    ],
    tableData:[
        {
            slotName:"default",
            slotData:"-",
            description:"默认插槽，弹窗内的自定义内容元素"
        },
        {
            slotName:"extra",
            slotData:"-",
            description:"弹窗内需要额外添加的内容元素"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
